<template>
    <y-layout title="LightBox">
        <p style="color: #00c3f5;padding-bottom: 5px;padding-left: 5px;font-size: 15px;" class="demo-small-pitch">
            参照 京东APP 和 <a href="http://photoswipe.com/" style="text-decoration: underline;">Photoswipe</a> 功能实现。
        </p>
        <y-lightbox>
            <div class="demo-lightbox">
                <div>
                    <y-lightbox-img :src="baseurl + 'scenery_s01.jpg'" :original="baseurl + 'scenery_01.jpg'"></y-lightbox-img>
                </div>
                <div>
                    <div>
                        <div><y-lightbox-img :src="baseurl + 'scenery_s02.jpg'" :original="baseurl + 'scenery_02.jpg'"></y-lightbox-img></div>
                        <div><y-lightbox-img :src="baseurl + 'scenery_s03.jpg'" :original="baseurl + 'scenery_03.jpg'"></y-lightbox-img></div>
                    </div>
                    <div>
                        <div><y-lightbox-img :src="baseurl + 'scenery_s04.jpg'" :original="baseurl + 'scenery_04.jpg'"></y-lightbox-img></div>
                        <div><y-lightbox-img :src="baseurl + 'scenery_s05.jpg'" :original="baseurl + 'scenery_05.jpg'"></y-lightbox-img></div>
                    </div>
                </div>
            </div>

            <y-lightbox-txt>
                <h1 style="font-size: 15px;margin-bottom: 8px;color: #00c3f5;text-align: right;" slot="top">美丽风景</h1>
                <div slot="content" style="text-align: right;">
                    <p>风景指的是供观赏的自然风光、景物，包括自然景观和人文景观</p>
                    <p>风景是由光对物的反映所显露出来的一种景象</p>
                    <p>犹言风光或景物、景色等，含义广泛</p>
                    <p>而且还有一大部分作品是借景抒情，寓情于景</p>
                </div>
            </y-lightbox-txt>
        </y-lightbox>
    </y-layout>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                baseurl: 'http://static.ydcss.com/uploads/lightbox/'
            }
        }
    }
</script>
